<script setup>
import { onMounted, reactive, ref } from 'vue'
import { setProfileAPI, profileAPI } from '@/api/login'
import { useMemberStore } from '@/stores'
const memberStore = useMemberStore()
console.log(memberStore)

const sexObj = {
  0: '男',
  1: '女',
}
const userInfo = reactive({
  userId: '',
  avatar: '',
  nickName: '',
  phonenumber: '',
  sex: '',
  birthday: '',
})

// 获取头像
const onChooseAvatar = (e) => {
  const { avatarUrl } = e.detail
  userInfo.avatar = avatarUrl
}

const bindPickerChange = (e, data = []) => {
  const { value } = e.detail
  console.log(value, '30===')
  if (data.length > 0) {
    userInfo.sex = value
  } else {
    userInfo.birthday = value
  }
}

// 退出登录
const onLogout = () => {
  // 模态弹窗
  uni.showModal({
    content: '是否注销？',
    confirmColor: '#ea5506',
    success: (res) => {
      if (res.confirm) {
        // 清理用户信息
        memberStore.clearProfile()
        // 返回上一页
        uni.navigateBack()
      }
    },
  })
}

// 保存用户信息
const saveInfo = async () => {
  await setProfileAPI(userInfo)
  const res = await profileAPI()
  memberStore.setProfile({ ...res.data, roleGroup: res.roleGroup })
  uni.showToast({ title: '修改成功', icon: 'none' })
  setTimeout(() => {
    uni.navigateBack()
  }, 500)
}

// 获取用户信息
const getProfile = async () => {
  try {
    const res = await profileAPI()
	console.log(res,'1111');
    userInfo.userId = res.data.userId
    userInfo.avatar = res.data.avatar
    userInfo.nickName = res.data.nickName
    userInfo.phonenumber = res.data.phonenumber
    userInfo.birthday = res.data.birthday
    userInfo.sex = res.data.sex
  } catch (error) {
    const { code, msg } = error
    if (code != '401') {
      uni.showToast({ title: msg, icon: 'none' })
    }
  }
}

onMounted(() => {
  getProfile()
})
</script>

<template>
  <view class="user-info">
    <view class="list">
      <view class="item">
        <view class="item-left"> 头像 </view>
        <view class="item-right">
          <button
            class="avatar-wrapper"
            open-type="chooseAvatar"
            @chooseavatar="onChooseAvatar"
            plain
          >
            <image class="avtar" :src="userInfo.avatar" mode="aspectFill" />
          </button>

          <image
            class="arrow-icon"
            src="../../static/images/my/right-icon.png"
            mode="aspectFill"
          />
        </view>
      </view>
      <view class="item">
        <view class="item-left"> 昵称 </view>
        <view class="item-right">
          <input
            type="nickname"
            v-model="userInfo.nickName"
            class="input"
            placeholder="请输入昵称"
          />
          <image
            class="arrow-icon"
            src="../../static/images/my/right-icon.png"
            mode="aspectFill"
          />
        </view>
      </view>
      <view class="item">
        <view class="item-left"> 手机号 </view>
        <view class="item-right">
          <input
            class="input"
            disabled
            v-model="userInfo.phonenumber"
            type="number"
            placeholder="请输入手机号"
          />
          <image
            class="arrow-icon"
            src="../../static/images/my/right-icon.png"
            mode="aspectFill"
          />
        </view>
      </view>
      <view class="item">
        <view class="item-left"> 性别 </view>
        <view class="item-right">
          <picker
            @change="(e) => bindPickerChange(e, ['男', '女'])"
            :range="['男', '女']"
          >
            <text class="selectText" v-if="sexObj[userInfo.sex]">{{
              sexObj[userInfo.sex]
            }}</text>
            <text v-else class="selectText">请选择</text>
          </picker>
          <image
            class="arrow-icon"
            src="../../static/images/my/right-icon.png"
            mode="aspectFill"
          />
        </view>
      </view>
      <view class="item">
        <view class="item-left">生日</view>
        <view class="item-right">
          <picker
            mode="date"
            :value="userInfo.birthday"
            @change="(e) => bindPickerChange(e)"
          >
            <text v-if="!userInfo.birthday" class="selectText">请选择</text>
            <text v-else class="selectText">{{ userInfo.birthday }}</text>
          </picker>
          <image
            class="arrow-icon"
            src="../../static/images/my/right-icon.png"
            mode="aspectFill"
          />
        </view>
      </view>
    </view>
    <view @click="saveInfo" class="save-btn"> 保存 </view>
    <view @tap="onLogout" class="log-off">注销账号</view>
  </view>
</template>

<style lang="scss" scoped>
.user-info {
  height: 100vh;
  background: #f5f5f5;
  padding: 24rpx;
  .list {
    width: 100%;
    border-radius: 22rpx;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 8.5px 25.5px rgba(245, 237, 233, 1);
    padding: 16rpx 40rpx;
    .item {
      height: 100rpx;
      border-bottom: 1px solid rgba(240, 245, 247, 1);
      display: flex;
      justify-content: space-between;
      align-items: center;
      .item-left {
        display: flex;
        align-items: center;
        image {
          width: 48rpx;
          height: 48rpx;
          margin-right: 20rpx;
        }
        font-size: 28rpx;
        color: rgba(54, 59, 71, 1);
      }
      .item-right {
        display: flex;
        align-items: center;
        .avatar-wrapper {
          border: none;
          padding: 0;
          line-height: 0;
        }
        .avtar {
          width: 70rpx;
          height: 70rpx;
          border-radius: 50%;
        }
        .arrow-icon {
          margin-left: 16rpx;
          width: 12rpx;
          height: 24rpx;
        }
        .nickName {
          font-size: 28rpx;
          color: #000000;
        }
        .selectText {
          font-size: 28rpx;
          color: #999999;
        }
        .input {
          font-size: 28rpx;
          color: #999999;
          text-align: right;
        }
      }
    }
    .item:last-child {
      border: none;
    }
  }
  .save-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 116rpx 44rpx 26rpx;
    height: 90rpx;
    border-radius: 5px;
    background: #ea5506;
    font-size: 32rpx;
    font-weight: 700;
    color: rgba(255, 255, 255, 1);
  }
  .log-off {
    font-size: 32rpx;
    color: rgba(234, 85, 6, 1);
    text-align: center;
  }
}
.limit2 {
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: nowrap;
}
.limit3 {
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  white-space: nowrap;
}
</style>
